<script>
Vue.component('area-selector', require('area-selector'));

$(function () {

    var form = new Vue({
        el:'#form',
        data:{
            submiting:false,
            serviceAreas:[],
            selectedServiceAreaIds:[],
            changingServiceAreaIds:false,
            selectedServiceTypes:[],
            changingServiceTypes:false,
            redirectUrl:window.redirectUrl,
        },
        methods:{
            /**
             * 更改手机号码
             * @param event
             */
            changePhone:function(event){
                if (confirm('更改手机号码需要重新验证')){
                    location.href = '/auth/smsverify';
                }else{
                    $(this).blur();
                }
            },
            /**
             * 更改身份证照片
             * @param event
             */
            idcardImage:function(event){
                var that = event.target;
                wx.chooseImage({
                    count: 1, // 默认9
                    success: function (res) {
                        var localId = res.localIds[0];
                        that.src = localId;
                        wx.uploadImage({
                            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1,// 默认为1，显示进度提示
                            success: function (res) {
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                $(that).next('input').val(serverId);
                            }
                        });
                    }
                });
            },
            /**
             * 更改省
             */
            selectProvince:function(parent,provinceId,cities){
                this.serviceAreas = [];
            },
            /**
             * 更改市
             */
            selectCity:function(parent,cityId,districts){
                this.serviceAreas = districts;
            },
            /**
             * 更改服务区域
             * @param event
             */
            selectServiceAreaIds:function(event){
                var self = this;
                this.selectedServiceAreaIds = [];
                $('input[name^=serviceAreaIds]:checked').each(function(i){
                    self.selectedServiceAreaIds.push($(this).attr('data-text'));
                });
            },
            /**
             * 更改服务类型
             * @param event
             */
            selectServiceTypes:function(event){
                var self = this;
                this.selectedServiceTypes = [];
                $('input[name^=serviceTypes]:checked').each(function(i){
                    self.selectedServiceTypes.push($(this).attr('data-text'));
                });
            },
            submit:_.throttle(function(event){
                if (!validator.form()){
                    return;
                }

                this.submiting = true;
                var self = this;
                axios.post('/ajax/register', $('#form').serialize())
                .then(function (response) {
                    self.submiting = false;
                    if (response.data.code == 200) {
                        alert('已成功提交');
                        location.href = self.redirectUrl;
                    } else {
                        alert(response.data.message || '注册失败');
                    }
                },function (response) {
                    self.submiting = false;
                    alert(response.data.message || '注册失败');

                }).catch(function (err) {
                    self.submiting = false;
                    alert('注册失败');
                });
            },150)
        }
    });

    var validator = $("#form").validate({
        rules: {
            weixinUserId:{
                required:true,
            },
            phoneNum:{
                required:true,
                mobile:true
            },
            realName:{
                required:true,
                chineseName:true
            },
            idcardNum:{
                required:true,
                idcard:true
            },
            areaId:{
                required:true,
            },
            'serviceAreaIds[]':{
                required:true,
            },
            serviceCategory:{
                required:true,
            },
            'serviceTypes[]':{
                required:true,
            },
            idcardFront:{
                required:true,
            },
            idcardBack:{
                required:true,
            },
            idcardHold:{
                required:true,
            },
        },
        messages: {
            weixinUserId:{
                required:'获取不到微信用户id，请刷新页面重新注册',
            },
            phoneNum: {
                required:'请输入手机号码',
            },
            realName:{
                required:'请输入真实姓名',
            },
            idcardNum:{
                required:'请输入身份证号',
            },
            areaId:{
                required:'请选择所在所在省市区',
            },
            'serviceAreaIds[]':{
                required:'请选择服务区域',
            },
            serviceCategory:{
                required:'请选择服务类目',
            },
            'serviceTypes[]':{
                required:'请选择服务类型',
            },
            idcardFront:{
                required:'请上传本人正面身份证照片',
            },
            idcardBack:{
                required:'请上传本人背面身份证照片',
            },
            idcardHold:{
                required:'请上传本人半身手持身份证照片',
            },
        }
    });
});
</script>
<style>
    body {
        background: #fff;
    }
    .conter ul.login li.checkbox02{
        height:auto;
    }
    .login li div.checkbox01{
        width:100%;
        margin:0px;
        padding:0px;
    }
    .login li div.checkbox01 span{
        border:none;
        width:30%;
        padding:0 10px;
    }
</style>